import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestTextFieldWidget extends StatefulWidget {
  const TestTextFieldWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return TextFieldState();
  }
}

// https://book.flutterchina.club/chapter3/input_and_form.html#_3-5-1-textfield
class TextFieldState extends State<TestTextFieldWidget> {
  //定义一个controller
  TextEditingController _unameController = TextEditingController();

  // 定义一个焦点
  FocusNode focusNode1 = FocusNode();
  FocusNode focusNode2 = FocusNode();
  FocusScopeNode? focusScopeNode;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _unameController.text = "hello flutter";
    _unameController.selection =
        TextSelection(baseOffset: 2, extentOffset: _unameController.text.length);
    _unameController.addListener(() {
      print("监听输入的内容 通过Controller ${_unameController.text}");
    });

    // 焦点变化的监听
    focusNode1.addListener(() {
      print("焦点监听 ${focusNode1.hasFocus}");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础组件 输入框 学习使用"),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextButton(
                onPressed: () {
                  (focusScopeNode ??= FocusScope.of(context)).requestFocus(focusNode2);
                },
                child: const Text("切换焦点")),
            TextButton(
                onPressed: () {
                  focusNode1.unfocus();
                  focusNode2.unfocus();
                },
                child: const Text("关闭键盘")),
            TextField(
              autofocus: true,
              focusNode: focusNode1,
              decoration: InputDecoration(
                  labelText: "用户名", hintText: "请输入用户名", prefixIcon: Icon(Icons.person)),
            ),
            TextField(
              decoration: InputDecoration(
                  labelText: "密码", hintText: "您的登录密码", prefixIcon: Icon(Icons.lock)),
              obscureText: true,
            ),
            TextField(
              autofocus: true,
              cursorColor: Colors.red,
              cursorRadius: Radius.circular(10.0),
              cursorHeight: 40,
              cursorWidth: 40,
              decoration: InputDecoration(
                  labelText: "输入框光标宽度、圆角和颜色", hintText: "请输入", prefixIcon: Icon(Icons.person)),
            ),
            TextField(
              autofocus: true,
              enabled: false,
              decoration: InputDecoration(
                  labelText: "输入框会禁用 enabled: false",
                  hintText: "请输入",
                  prefixIcon: Icon(Icons.person)),
            ),
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                  labelText: "onEditingComplete/onSubmitted",
                  hintText: "请输入",
                  prefixIcon: Icon(Icons.person)),
              onEditingComplete: () {
                print("输入完成 onEditingComplete");
              },
              onSubmitted: (value) {
                print("输入完成 onSubmitted ${value}");
              },
            ),
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                  labelText: "onChanged", hintText: "请输入", prefixIcon: Icon(Icons.person)),
              onChanged: (value) {
                print("onChanged ${value}");
              },
            ),
            TextField(
              autofocus: true,
              focusNode: focusNode2,
              decoration: InputDecoration(
                  labelText: "获取输入内容 controller", hintText: "请输入", prefixIcon: Icon(Icons.person)),
              controller: _unameController,
              onEditingComplete: () {
                print("获取输入内容 >> ${_unameController.text}");
              },
            ),
            TextField(
              decoration: InputDecoration(
                labelText: "获取输入内容 controller",
                hintText: "请输入",
                prefixIcon: Icon(Icons.person),
                enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red)),
                focusedBorder:
                    UnderlineInputBorder(borderSide: BorderSide(color: Colors.yellowAccent)),
              ),
            )
          ],
        ),
      ),
    );
  }
}
